/* header start */
         .header{
            width: 10rem;
            height: 0.6667rem;
            display: flex;
            align-items: center;
            margin: 0.24rem auto 0;
        }
        .header .logo-wrap{
            margin-left: 0.3867rem;
            flex-grow: 1;
        }
        .header .search{
            margin-right: 0.6533rem;
        }
        .header .login-wrap{
            margin-right: 0.56rem;
        }
        .header .download{
            margin-right: 0.2533rem;
        }
        .header .logo-wrap .logo{
            width: 1.9467rem;
        }
        .header .search .search-img{
            width: 0.5067rem;
        }
        .header .login-wrap .login{
            width: 0.6133rem;
        }
        .header .download{
            display: inline-block;
            width: 1.92rem;
            height: 0.64rem;
            background: #FF9F00;
            border-radius: 0.1067rem;
            font-weight: 400;
            color: #FFF;
            line-height: 0.64rem;
            text-align: center;
        }
        /* end header */

        /* nav start */
    .nav {
        /* margin-top: 0.6rem; */
        /* background-color: khaki; */
        padding-left: 0.4rem;
        /* border-bottom: 0.0133rem solid #f3f3f3; */
        border-bottom: var(--border-width) solid #f3f3f3;
        width: 10rem;
        margin: 0.6rem auto 0;
      }
      .nav .swiper-slide a {
        display: inline-block;
        font-size: 0.3733rem;
        padding-bottom: 0.28rem;
        border-bottom: 0.0267rem solid transparent;
      }
      .nav .swiper-slide a.active {
        color: #ff9f00;
        border-color: #ff9f00;
      }
      /* end nav */

            /* banner start */
      .banner {
        width: 9.4933rem;
        height: 3.1467rem;
        margin: 0.2533rem auto 0.24rem;
        background-color: khaki;
      }
      .banner .swiper {
        /* width: 100%; */
        height: 3.1467rem;
        --swiper-pagination-bullet-horizontal-gap:0.08rem;
      }
      .banner .swiper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .banner .swiper .swiper-pagination-bullet {
        width: 0.2rem;
        height: 0.08rem;
        background: #fff;
        border-radius: 0;
      }

      /* end banner */

      /* menu start */
      .menu {
        width: 9.4933rem;
        padding-bottom: 0.4133rem;
        background-color: khaki;
        margin: 0 auto;
        background-color: #f7f7f7;
        border-radius: 0.1067rem;
        margin-bottom: 0.24rem;
      }
      .menu ul {
        display: flex;
        flex-wrap: wrap;
      }
      .menu ul li {
        width: 20%;
        /* height: 1.3333rem; */
        text-align: center;
        padding-top: 0.4rem;
      }
      .menu ul li img {
        width: 1.0133rem;
        height: 1.0133rem;
      }
      .menu ul li a{
        display: block;
        font-size: 0.2933rem;
      }
      .menu ul li a p{
        margin-top: 0.1733rem;
      }
      /* end menu */

      /* tabs start */
      
      .tabs{
        background-color: #f7f7f7;
        border-radius: 0.1067rem;
        margin-bottom: 0.24rem;
      }
      .tabs .tab-header{
        height: 1.3867rem;
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 0.16rem;
      }
      .tabs .tab-header .tab-header-item{
        border: 0.0267rem solid #6b6b6b;
        width: 1.5733rem;
        height: 0.5867rem;
        text-align: center;
        line-height: 0.5867rem;
        font-size: 0.2933rem;
        color: #6c6c6c;
        border-radius: 0.2933rem;
        margin-right: 0.3867rem;
      }
      .tabs .tab-header .tab-header-item.active{
        border-color: #FF9F00;
        color: #FF9F00;
      }

      .tabs .tab-content .tab-content-item{
        display: none;
      }

      /* 公共卡片样式 */
      .common-card{

      }
      .common-card .img{
        height: 2.5867rem;
        position: relative;
    }
    .common-card .img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .common-card .img .card-info{
        width: 100%;
        height: 0.7467rem;
        padding: 0.2rem 0 0.1867rem 0;
        background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.8));

        position:absolute;
        bottom: 0 ;
        left: 0;
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
    }
    
    .common-card .img .card-info span{
color: #fff;
padding-left: 0.5733rem;
    }
    .common-card .img .card-info .play-count{
        background-image: url(../images/icon-play@2x.png);
        background-repeat: no-repeat;
        background-size: 0.4133rem 0.36rem;
        margin-left: 0.1867rem

    }
    .common-card .img .card-info .number{
        background-image: url(../images/icon-nav@2x.png);
        background-repeat: no-repeat;
        background-size: 0.4133rem 0.36rem;
        margin-right: 0.16rem;
    }
    .common-card p.title{
        color: #000;
        line-height: 0.48rem;
        height: 0.96rem;
        margin-top: 0.1067rem;
        margin-bottom: 0.2533rem;
    }
      /* end tabs */

      /* recommend start */
      .recommend-list {
        /* min-height: 4rem; */
        background-color: #f7f7f7;
        border-radius: 0.1067rem;
        margin-bottom: 0.24rem;
        
      }
      .recommend-list ul li {
        /* border: 0.0133rem solid #000; */
        padding: 0.2667rem 0;
        margin: 0 0.2667rem;
        /* border-bottom: 0.0133rem solid #e6e6e6; */
        border-bottom: var(--border-width) solid #e6e6e6;
      }
      .recommend-list ul li a{
        display: flex;    /* 表示当前元素自身是一个块级元素，子元素默认水平排列 */
        align-items: center;
      }
      .recommend-list ul li:last-child {
        border: none;
      }
      .recommend-list ul li .img-wrap {
        width: 1.0133rem;
        height: 1.0133rem;
        background-color: khaki;
        margin-right: 0.24rem;
        flex-shrink: 0; /* 永不压缩 */
      }
      .recommend-list ul li .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .recommend-list ul li .info {
        flex-grow: 1;
        min-height: 1.0133rem;
        min-width: 0;
        /* background-color: skyblue; */
      }
      .recommend-list ul li .info .title {
        color: #ff9f00;
        font-size: 0.3467rem;
        font-weight: 400;
      }
      .recommend-list ul li .info .desc {
        color: #000;
        margin-top: 0.3067rem;
      }
      .recommend-list ul li .play-button {
        width: 0.5867rem;
        height: 0.5867rem;
        background-image: url(../images/icon-play-@2x.png);
        background-size: cover;
        margin-right: 0.2rem;
        margin-left: 0.3467rem;
        flex-shrink: 0; /* 永不压缩 */
      }
      /* end recommend */

      /* history start */
      .history{
        /* min-height: 4rem; */
        background-color: #f7f7f7;
        border-radius: 0.1067rem;
        margin-bottom: 0.24rem;

      }
      .history .history-header{
        height: 1.0933rem;
        /* background-color: khaki; */
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .history .history-header .title{
        margin-left: 0.1467rem;
        font-size: 0.4267rem;
        color: #000;
      }
        .history .history-header .more{
            color: #b9b9bd;
            /* border: 0.0133rem solid #000; */
            padding-right: 0.4rem;
            margin-right: 0.2667rem;
            background-image: url(../images/arrow-right.png);
            background-repeat: no-repeat;
            background-position: right center;
            background-size: 0.1467rem;
        }
        .history .swiper{
            margin-top:0.32rem;
            min-height:4rem;
            /* border: 0.0133rem solid #000; */

        }
        .history .swiper .swiper-slide{
            /* border: 0.0133rem solid red; */
            width: 2.2667rem;
            min-height: 4rem;
            margin-bottom: 0.32rem;
        }
        .history .swiper-slide .img-wrap{
            width: 2.2667rem;
            height: 3.04rem;
        }
        .history .swiper-slide .img-wrap img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
        .history .swiper-slide .title{
            line-height: 0.48rem;
            font-weight: 400;
            text-align: center;
            height:0.96rem;
            margin-top: 0.1333rem;
            margin-bottom: 0.1467rem;
            color: #000;
        }
        /* end history */

        /* info-list start */
        .info-list {
            padding-bottom: 1.2rem;
      }
      .info-list ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .info-list ul li {
        width: 4.6133rem;
        /* border: 0.0133rem solid #000; */
      }
      .info-list .common-card p.title{
        margin-bottom: 0.2267rem;
        /* background-color: #f7f7f7; */
      }
      /* end info-list */

      /* footer start */
       .footer-bar{
        width: 10rem;
        height: 1.32rem;
        background-color: #fff;
        box-shadow: 0 0 0.0267rem #ddd;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        left: 50%;
        transform: translateX(-50%);
      }
      .footer-bar ul{
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
        padding: 0.2rem 0.52rem 0;

      }
      /* .footer-bar ul li{
        border: 0.0133rem solid #000;
      } */
      .footer-bar ul li a{
        display: flex;
        flex-direction: column;
        color: #000;
        /* align-items: center; */
      }
      .footer-bar ul li.active a{
        color: #ff9f00;
      }
      .footer-bar ul li .icon{
        height: 0.4933rem;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: auto 0.4933rem;
        /* border: 0.0133rem solid red; */
        margin-bottom: 0.1467rem;
      }
      .footer-bar ul li .icon1{
        background-image: url(../images/f-icon1-active@2x.png);
      }
      .footer-bar ul li .icon2{
        background-image: url(../images/f-icon2@2x.png);
      }
            .footer-bar ul li .icon3{
        background-image: url(../images/f-icon3@2x.png);
      }
            .footer-bar ul li .icon4{
        background-image: url(../images/f-icon4@2x.png);
      }
      .footer-bar ul li.add a{
        display: block;
        width: 1.04rem;
        height: 1.0133rem;
        /* background-color: #ff9f00; */
        border-radius: 0.3733rem;
        background:#ff9f00 url(../images/f-icon-add.png) no-repeat center/0.4133rem 0.4rem;
      }
      /* end footer-bar */
